<!DOCTYPE HTML>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no,target-densitydpi=medium-dpi">
    <meta name="format-detection" content="telephone=no" /><!-- 去除ios的识别电话号码功能 -->
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit"/>
		<meta name="baidu-site-verification" content="4xlnazKhKn" />
    <title>滤镜</title>
    <link href="filter.css" rel="stylesheet">
    <style>
    
      img{
        width:300px;
      }   
    </style>
</head>
<body>
  <div class="group">
    <p>模糊</p>
    <img src="22.jpg" class="">
    <img src="22.jpg" class="filter-blur-1">
    <img src="22.jpg" class="filter-blur-2">
    <img src="22.jpg" class="filter-blur-3">
    <img src="22.jpg" class="filter-blur-4">
    <img src="22.jpg" class="filter-blur-5">
    <img src="22.jpg" class="filter-blur-6">
    <img src="22.jpg" class="filter-blur-7">
    <img src="22.jpg" class="filter-blur-8">
    <img src="22.jpg" class="filter-blur-9">
    <img src="22.jpg" class="filter-blur-10">
    
  </div>
  <div class="group">
    <p>灰度</p>
    <img src="22.jpg" class="">
    <img src="22.jpg" class="filter-gray-1">
    <img src="22.jpg" class="filter-gray-2">
    <img src="22.jpg" class="filter-gray-3">
    <img src="22.jpg" class="filter-gray-4">
    <img src="22.jpg" class="filter-gray-5">
    <img src="22.jpg" class="filter-gray-6">
    <img src="22.jpg" class="filter-gray-7">
    <img src="22.jpg" class="filter-gray-8">
    <img src="22.jpg" class="filter-gray-9">
    <img src="22.jpg" class="filter-gray-10">
    
  </div>
  <div class="group">
    <p>反色</p>
    <img src="22.jpg" class="">
    <img src="22.jpg" class="filter-invert-1">
    <img src="22.jpg" class="filter-invert-2">
    <img src="22.jpg" class="filter-invert-3">
    <img src="22.jpg" class="filter-invert-3">
    <img src="22.jpg" class="filter-invert-5">
    <img src="22.jpg" class="filter-invert-6">
    <img src="22.jpg" class="filter-invert-7">
    <img src="22.jpg" class="filter-invert-8">
    <img src="22.jpg" class="filter-invert-9">
    <img src="22.jpg" class="filter-invert-10">
    
  </div>
  <div class="group">
    <p>亮度</p>
    <img src="22.jpg" class="">
    <img src="22.jpg" class="filter-brightness-1">
    <img src="22.jpg" class="filter-brightness-2">
    <img src="22.jpg" class="filter-brightness-3">
    <img src="22.jpg" class="filter-brightness-4">
    <img src="22.jpg" class="filter-brightness-5">
    <img src="22.jpg" class="filter-brightness-6">
    <img src="22.jpg" class="filter-brightness-7">
    <img src="22.jpg" class="filter-brightness-8">
    <img src="22.jpg" class="filter-brightness-9">
    <img src="22.jpg" class="filter-brightness-10">
    <img src="22.jpg" class="filter-brightness-11">
    <img src="22.jpg" class="filter-brightness-12">
    <img src="22.jpg" class="filter-brightness-13">
    <img src="22.jpg" class="filter-brightness-14">
    <img src="22.jpg" class="filter-brightness-15">
    <img src="22.jpg" class="filter-brightness-16">
    <img src="22.jpg" class="filter-brightness-17">
    <img src="22.jpg" class="filter-brightness-18">
    <img src="22.jpg" class="filter-brightness-19">
    <img src="22.jpg" class="filter-brightness-20">
    <img src="22.jpg" class="filter-brightness-21">
    <img src="22.jpg" class="filter-brightness-22">
    <img src="22.jpg" class="filter-brightness-23">
    <img src="22.jpg" class="filter-brightness-24">
    <img src="22.jpg" class="filter-brightness-25">
    <img src="22.jpg" class="filter-brightness-26">
    <img src="22.jpg" class="filter-brightness-27">
    <img src="22.jpg" class="filter-brightness-28">
    <img src="22.jpg" class="filter-brightness-29">
    <img src="22.jpg" class="filter-brightness-30">
    <img src="22.jpg" class="filter-brightness-40">
    <img src="22.jpg" class="filter-brightness-50">
    <img src="22.jpg" class="filter-brightness-60">
    <img src="22.jpg" class="filter-brightness-70">
    <img src="22.jpg" class="filter-brightness-80">
    <img src="22.jpg" class="filter-brightness-90">
    
    
  </div>
  <div class="group">
    <p>褐色</p>
    <img src="22.jpg" class="">
    <img src="22.jpg" class="filter-sepia-1">
    <img src="22.jpg" class="filter-sepia-2">
    <img src="22.jpg" class="filter-sepia-3">
    <img src="22.jpg" class="filter-sepia-3">
    <img src="22.jpg" class="filter-sepia-5">
    <img src="22.jpg" class="filter-sepia-6">
    <img src="22.jpg" class="filter-sepia-7">
    <img src="22.jpg" class="filter-sepia-8">
    <img src="22.jpg" class="filter-sepia-9">
    <img src="22.jpg" class="filter-sepia-10">
    
  </div>
  <div class="group">
    <p>饱和度</p>
    <img src="22.jpg" class="">
    <img src="22.jpg" class="filter-saturate-1">
    <img src="22.jpg" class="filter-saturate-2">
    <img src="22.jpg" class="filter-saturate-3">
    <img src="22.jpg" class="filter-saturate-3">
    <img src="22.jpg" class="filter-saturate-5">
    <img src="22.jpg" class="filter-saturate-6">
    <img src="22.jpg" class="filter-saturate-7">
    <img src="22.jpg" class="filter-saturate-8">
    <img src="22.jpg" class="filter-saturate-9">
    <img src="22.jpg" class="filter-saturate-10">
    <img src="22.jpg" class="filter-saturate-11">
    <img src="22.jpg" class="filter-saturate-12">
    <img src="22.jpg" class="filter-saturate-13">
    <img src="22.jpg" class="filter-saturate-14">
    <img src="22.jpg" class="filter-saturate-15">
    <img src="22.jpg" class="filter-saturate-16">
    <img src="22.jpg" class="filter-saturate-17">
    <img src="22.jpg" class="filter-saturate-18">
    <img src="22.jpg" class="filter-saturate-19">
    <img src="22.jpg" class="filter-saturate-20">
    <img src="22.jpg" class="filter-saturate-21">
    <img src="22.jpg" class="filter-saturate-22">
    <img src="22.jpg" class="filter-saturate-23">
    <img src="22.jpg" class="filter-saturate-24">
    <img src="22.jpg" class="filter-saturate-25">
    <img src="22.jpg" class="filter-saturate-26">
    <img src="22.jpg" class="filter-saturate-27">
    <img src="22.jpg" class="filter-saturate-28">
    <img src="22.jpg" class="filter-saturate-29">
    <img src="22.jpg" class="filter-saturate-30">
    <img src="22.jpg" class="filter-saturate-40">
    <img src="22.jpg" class="filter-saturate-50">
    <img src="22.jpg" class="filter-saturate-60">
    <img src="22.jpg" class="filter-saturate-70">
    <img src="22.jpg" class="filter-saturate-80">
    <img src="22.jpg" class="filter-saturate-90">
    
  </div>
  <div class="group">
    <p>色相旋转</p>
    <img src="22.jpg" class="">
    <img src="22.jpg" class="filter-hue-rotate-10">
    <img src="22.jpg" class="filter-hue-rotate-20">
    <img src="22.jpg" class="filter-hue-rotate-30">
    <img src="22.jpg" class="filter-hue-rotate-40">
    <img src="22.jpg" class="filter-hue-rotate-50">
    <img src="22.jpg" class="filter-hue-rotate-60">
    <img src="22.jpg" class="filter-hue-rotate-70">
    <img src="22.jpg" class="filter-hue-rotate-80">
    <img src="22.jpg" class="filter-hue-rotate-90">
    <img src="22.jpg" class="filter-hue-rotate-100">
    <img src="22.jpg" class="filter-hue-rotate-110">
    <img src="22.jpg" class="filter-hue-rotate-120">
    <img src="22.jpg" class="filter-hue-rotate-130">
    <img src="22.jpg" class="filter-hue-rotate-140">
    <img src="22.jpg" class="filter-hue-rotate-150">
    <img src="22.jpg" class="filter-hue-rotate-160">
    <img src="22.jpg" class="filter-hue-rotate-170">
    <img src="22.jpg" class="filter-hue-rotate-180">
    <img src="22.jpg" class="filter-hue-rotate-190">
    <img src="22.jpg" class="filter-hue-rotate-200">
    <img src="22.jpg" class="filter-hue-rotate-210">
    <img src="22.jpg" class="filter-hue-rotate-220">
    <img src="22.jpg" class="filter-hue-rotate-230">
    <img src="22.jpg" class="filter-hue-rotate-240">
    <img src="22.jpg" class="filter-hue-rotate-250">
    <img src="22.jpg" class="filter-hue-rotate-260">
    <img src="22.jpg" class="filter-hue-rotate-270">
    <img src="22.jpg" class="filter-hue-rotate-280">
    <img src="22.jpg" class="filter-hue-rotate-290">
    <img src="22.jpg" class="filter-hue-rotate-300">
    <img src="22.jpg" class="filter-hue-rotate-310">
    <img src="22.jpg" class="filter-hue-rotate-320">
    <img src="22.jpg" class="filter-hue-rotate-330">
    <img src="22.jpg" class="filter-hue-rotate-340">
    <img src="22.jpg" class="filter-hue-rotate-350">
    <img src="22.jpg" class="filter-hue-rotate-360">
    
  </div>
  <div class="group">
    <p>对比度</p>
    <img src="22.jpg" class="">
    <img src="22.jpg" class="filter-contrast-1">
    <img src="22.jpg" class="filter-contrast-2">
    <img src="22.jpg" class="filter-contrast-3">
    <img src="22.jpg" class="filter-contrast-3">
    <img src="22.jpg" class="filter-contrast-5">
    <img src="22.jpg" class="filter-contrast-6">
    <img src="22.jpg" class="filter-contrast-7">
    <img src="22.jpg" class="filter-contrast-8">
    <img src="22.jpg" class="filter-contrast-9">
    <img src="22.jpg" class="filter-contrast-10">
    <img src="22.jpg" class="filter-contrast-11">
    <img src="22.jpg" class="filter-contrast-12">
    <img src="22.jpg" class="filter-contrast-13">
    <img src="22.jpg" class="filter-contrast-14">
    <img src="22.jpg" class="filter-contrast-15">
    <img src="22.jpg" class="filter-contrast-16">
    <img src="22.jpg" class="filter-contrast-17">
    <img src="22.jpg" class="filter-contrast-18">
    <img src="22.jpg" class="filter-contrast-19">
    <img src="22.jpg" class="filter-contrast-20">
    <img src="22.jpg" class="filter-contrast-21">
    <img src="22.jpg" class="filter-contrast-22">
    <img src="22.jpg" class="filter-contrast-23">
    <img src="22.jpg" class="filter-contrast-24">
    <img src="22.jpg" class="filter-contrast-25">
    <img src="22.jpg" class="filter-contrast-26">
    <img src="22.jpg" class="filter-contrast-27">
    <img src="22.jpg" class="filter-contrast-28">
    <img src="22.jpg" class="filter-contrast-29">
    <img src="22.jpg" class="filter-contrast-30">
    <img src="22.jpg" class="filter-contrast-31">
    <img src="22.jpg" class="filter-contrast-32">
    <img src="22.jpg" class="filter-contrast-33">
    <img src="22.jpg" class="filter-contrast-34">
    <img src="22.jpg" class="filter-contrast-35">
    <img src="22.jpg" class="filter-contrast-36">
    <img src="22.jpg" class="filter-contrast-37">
    <img src="22.jpg" class="filter-contrast-38">
    <img src="22.jpg" class="filter-contrast-39">
    
  </div>
</body>
</html>